import { useEffect, useState } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import ECarts from '@/pages/Echarts';
import { Card, Space, Row, Col, Statistic } from 'antd';
import { getStatistics } from './service';
import type { FormStatisticsType } from '@/pages/HomePage/data';
const HomePage = () => {
  const [statisticsInfo, setStatisticsInfo] = useState<FormStatisticsType>();
  const fetchList = async () => {
    try {
      const res = await getStatistics();
      if (res.success) {
        setStatisticsInfo(res.data.data);
        return true;
      } else {
        return false;
      }
    } catch (error) {
      return false;
    }
  };
  useEffect(() => {
    fetchList();
  }, []);

  return (
    <GridContent style={{ margin: 0, width: '100%' }}>
      <Card bodyStyle={{ padding: '32px 24px' }}>
        <Space direction="vertical" size={32} style={{ width: '100%' }}>
          <Row
            gutter={16}
            align="middle"
            style={{ maxWidth: '1200px', justifyContent: 'space-between', margin: '0 auto' }}
          >
            <Col flex={1} style={{ paddingLeft: '0px' }}>
              <Card
                style={{ borderLeft: '3px solid #1890FF' }}
                bodyStyle={{ paddingLeft: 40, paddingBottom: 10, height: '125px' }}
              >
                <Statistic title="总商品数" value={statisticsInfo?.goods_total} />
              </Card>
            </Col>
            <Col flex={1}>
              <Card
                style={{ borderLeft: '3px solid #1890FF' }}
                bodyStyle={{ paddingLeft: 40, paddingBottom: 10, height: '125px' }}
              >
                <Statistic title="总订单数" value={statisticsInfo?.orders_total} />
              </Card>
            </Col>
            <Col flex={1}>
              <Card
                style={{ borderLeft: '2px solid #1890FF' }}
                bodyStyle={{ paddingLeft: 40, paddingBottom: 10, height: '125px' }}
              >
                <Statistic title="总用户数" value={statisticsInfo?.users_total} />
              </Card>
            </Col>
            <Col flex={1}>
              <Card
                style={{ borderLeft: '3px solid #1890FF' }}
                bodyStyle={{ paddingLeft: 40, paddingBottom: 10, height: '125px' }}
              >
                <Statistic title="总分类数" value={statisticsInfo?.categorys_total} />
              </Card>
            </Col>
            <Col flex={1} style={{ paddingRight: '0px' }}>
              <Card
                style={{ borderLeft: '3px solid #1890FF' }}
                bodyStyle={{ paddingLeft: 40, paddingBottom: 10, height: '125px' }}
              >
                <Statistic title="总轮播图数" value={statisticsInfo?.carousel_total} />
              </Card>
            </Col>
          </Row>
        </Space>
      </Card>

      <ECarts />
    </GridContent>
  );
};
export default HomePage;
